<template>
  <div>
    <n-divider />

    <!--  points  -->
    <div class="sider-scene-geometry-item !hidden">
      <span>路径</span>
      <div>
        <div
          class="flex"
          v-for="(point, index) in objectData.path.points"
          :key="index"
        >
          <EsInputNumber
            v-model:value="point.x"
            size="tiny"
            :show-button="false"
            :decimal="2"
            @change="update()"
          />
          <EsInputNumber
            v-model:value="point.y"
            size="tiny"
            :show-button="false"
            :decimal="2"
            @change="update()"
          />
          <EsInputNumber
            v-model:value="point.z"
            size="tiny"
            :show-button="false"
            :decimal="2"
            @change="update()"
          />
          <!-- 删除当前路径点 -->
          <el-button
            size="small"
            type="info"
            class="px-2px py-0px h-18px shrink-0 ml-3px border-none"
            plain
            @click="handleEditPathPoint('minus', index)"
          >
            <el-icon :size="12"><Minus /></el-icon>
          </el-button>
        </div>
        <div class="flex justify-center mt-5px">
          <el-button
            size="small"
            type="info"
            class="px-2px py-0px h-18px border-none"
            plain
            @click="handleEditPathPoint('plus')"
          >
            <el-icon :size="12"><Plus /></el-icon>
          </el-button>
        </div>
      </div>

      <!--  TODO  UIPoints3 objectData.path.points   -->
    </div>

    <!--  radius  -->
    <div class="sider-scene-geometry-item">
      <span>半径</span>

      <EsInputNumber
        v-model:value="objectData.radius"
        class="!w-90px"
        size="small"
        :decimal="2"
        :show-button="false"
        @change="update()"
      />
    </div>

    <!--  tubularSegments  -->
    <div class="sider-scene-geometry-item">
      <span>管厚分段</span>

      <EsInputNumber
        v-model:value="objectData.tubularSegments"
        class="!w-90px"
        size="small"
        :decimal="0"
        :show-button="false"
        @change="update()"
      />
    </div>

    <!--  radialSegments  -->
    <div class="sider-scene-geometry-item">
      <span>径向分段</span>

      <EsInputNumber
        v-model:value="objectData.radialSegments"
        class="!w-90px"
        size="small"
        :decimal="0"
        :show-button="false"
        @change="update()"
      />
    </div>

    <!--  closed  -->
    <div class="sider-scene-geometry-item">
      <span>闭合</span>

      <n-checkbox
        size="small"
        v-model:checked="objectData.closed"
        @update:checked="update"
      />
    </div>

    <!--  curveType  -->
    <div class="sider-scene-geometry-item">
      <span>曲线类型</span>

      <n-select
        size="small"
        v-model:value="objectData.path.curveType"
        :options="curveTypeOptions"
        @update:value="update"
      />
    </div>

    <!--  tension  -->
    <div
      class="sider-scene-geometry-item"
      v-if="objectData.path.curveType === 'catmullrom'"
    >
      <span>张力</span>

      <EsInputNumber
        v-model:value="objectData.path.tension"
        class="!w-90px"
        size="small"
        :decimal="2"
        :show-button="false"
        @change="update"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElButton, ElIcon } from "element-plus";
import { Plus, Minus } from "@element-plus/icons-vue";
import { TubeGeometry } from "three";
import { SetGeometryCommand } from "@/core/commands/Commands";
import EsInputNumber from "@/components/es/EsInputNumber.vue";
import * as THREE from "three";

let objectData = reactive({
  path: {
    points: [],
    curveType: "centripetal",
    tension: 0.5,
  },
  radius: 1.0,
  tubularSegments: 64,
  radialSegments: 8,
  closed: false,
});

const curveTypeOptions = ref([
  { label: "centripetal", value: "centripetal" },
  { label: "chordal", value: "chordal" },
  { label: "catmullrom", value: "catmullrom" },
]);

onMounted(() => {
  const geometry = window.editor.selected.geometry;
  const parameters = geometry.parameters;
  Object.keys(parameters).forEach((key) => {
    objectData[key] = parameters[key];
  });
  console.log(objectData);
});

const handleEditPathPoint = (type, index) => {
  if (type === "plus") {
    if (objectData.path.points.length === 0) {
      objectData.path.points.push(new THREE.Vector3(0, 0, 0));
    } else {
      objectData.path.points.push(
        objectData.path.points[objectData.path.points.length - 1]
      );
    }
  } else {
    objectData.path.points.splice(index, 1);
  }
  update();
};

function update() {
  window.editor.execute(
    new SetGeometryCommand(
      window.editor.selected,
      new TubeGeometry(
        new THREE.CatmullRomCurve3(
          objectData.path.points,
          objectData.closed,
          objectData.path.curveType,
          objectData.path.tension
        ),
        objectData.tubularSegments,
        objectData.radius,
        objectData.radialSegments,
        objectData.closed
      )
    )
  );
}
</script>

<style lang="less" scoped></style>
